import { Component } from '@angular/core';

// interface Menu {
//   name: string;
//   icon: string;
//   link: string;
// }

@Component({
  selector: 'app-sidebar',
  templateUrl: './index.html',
  styleUrls: ['./index.scss'],
})
export class SideBarComponent {
  // menuList: Array<Menu> = [
  menuList = [
    { name: '主页', icon: '', link: '' },
    { name: 'form表单', icon: '', link: '/form' },
    { name: '父子通讯', icon: '', link: '/componentinput'},
    { name: 'ngFor遍历', icon: '', link: '/ngForm'},
    { name: 'template-form', icon: '', link: '/templateform'},
    { name: 'reactive-form', icon: '', link: '/reactiveform'},
    { name: 'validator-directive', icon: '', link: '/validatordirective'},
    { name: 'custom-formcontrol', icon: '', link: '/customformcontrol'},
    { name: 'async-data', icon: '', link: '/asyncdata'},
    // { name: 'demo1', icon: '', link: '/demos/demo1' },
    // { name: 'demo2', icon: '', link: '/demos/demo2' },
    // { name: 'demo3', icon: '', link: '/demos/demo3' },
    { name: 'change-detection',
      isOpen: true,
      children: [
        { name: 'demo1', icon: '', link: '/demos/demo1' },
        { name: 'demo2', icon: '', link: '/demos/demo2' },
        { name: 'demo3', icon: '', link: '/demos/demo3' },
      ],
    },
    {
      name: 'test pages', icon: '', link: '/test'
    }
  ];

  public toggleMenu(item) {
    console.log(item);
  }
}
